/**
 * App Demo SASS
 * 
 */
$baseColor		: #212121;
$lightBaseColor	: #F5F5F5;
$blueColor		: #3f51b5;
$lightBlueColor	: #5c6bc0;
$sightColor		: #00bcd5;
$redColor		: #ff5353;
$greenColor		: #26a59a;
$lightGreenColor: #E0F2F1;
$yellowColor	: #ffe083;
$lightYellowColor: #FFFDE7;
$orangeColor	: #ff9700;

@mixin frame-transition($wt: all, $sec: .3s) {
	-webkit-transition: $wt $sec ease 0s;
	-moz-transition: $wt $sec ease 0s;
	transition: $wt $sec ease 0s;
}

@mixin no-select {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

@mixin use-flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

@mixin flex-align-center {
	-webkit-align-items: center;
	-webkit-justify-content: center;
	align-items: center;
	justify-content: center;
}

@mixin flex-column {
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}

html,body{
	padding:0;margin:0;
	width:100%;
	height:100%;
	overflow:hidden;
	@include use-flex;
	@include flex-column;
	font-size:14px;

	ul,li{
		padding:0;margin:0;
		list-style:none;
	}

}

.user-extend-props{
	flex:1;
	@include use-flex;
	@include flex-column;
	position:relative;
	height:100%;
	overflow:hidden;

	.calDay-box{
		@include use-flex;
		border-radius:5px;
		transform : skew( -15deg );
		font-size:.8em;

		> div {
			@include use-flex;
			@include flex-align-center;
			transform : skew(15deg);
		}

		.calDay-name{
			border-radius:5px;
			transform : skew( 0deg );
			width: 40px;
		}

		.calDay-content{
			flex:1;
		}

	}

	.top-box{
		position:absolute;
		width: calc( 100% - 100px );
		min-width:70px;
		max-width:110px;
		height:25px;
		top:7px;left:10px;

		&.purple {
			background-color : $blueColor;
			color: lighten( $lightBaseColor, 100% );
		}

		>div:first-child {
			background-color : $lightBlueColor;
		}


	}



	.mid-box {
		@include use-flex;
		flex:1;
		margin:35px 0 10px 10px;
		width: calc( 100% - 20px );
		height:100%;

		> div.calLDay-box {
			@include use-flex;
			@include flex-column;
			border-radius:5px;
			margin:5px 3px;
			font-size:.8em;
			background-color : darken( $lightBaseColor, 8% );
			width : calc( (100% - 25px) / 2.5 );
			max-width: 40px;
			min-width: 30px;
			height:100%;
			max-height:70px;
			min-height:50px;
			margin-top:4px;
			color : darken( $lightBaseColor, 50% );

			>div{
				@include use-flex;
				height:100%;
				@include flex-align-center;

				&:first-child{
					border-radius:5px;
					background-color:  darken( $lightBaseColor, 12% );	
				}

			}

			&.blue{
				>div:first-child{
					background-color:  lighten( $sightColor, 5% );
				}

				background-color:  $sightColor;
				color : lighten( $lightBaseColor, 100% );
			}
			&.orange{
				>div:first-child{
					background-color:  lighten( $orangeColor, 10% );
				}

				background-color: $orangeColor;
				color : lighten( $lightBaseColor, 100% );
			}
			&.red{
				>div:first-child{
					background-color:  lighten( $redColor, 10% );
				}

				background-color: $redColor;
				color : lighten( $lightBaseColor, 100% );
			}
		}

	}
	
}

.cal-tip-all{
	@include use-flex;
	@include flex-column;
	padding:10px;

	.calDay-box{
		@include use-flex;
		border-radius:5px;
		transform : skew( -15deg );
		font-size:.8em;

		> div {
			@include use-flex;
			@include flex-align-center;
			transform : skew(15deg);
		}

		.calDay-name{
			border-radius:5px;
			transform : skew( 0deg );
			width: 40px;
		}

		.calDay-content{
			flex:1;
		}

	}

	.top-box{
		width: calc( 100% - 100px );
		min-width:70px;
		max-width:110px;
		height:25px;

		&.purple {
			background-color : $blueColor;
			color: lighten( $lightBaseColor, 100% );
		}

		>div:first-child {
			background-color : $lightBlueColor;
		}
	}

	.cal-tip-list ul{
		@include use-flex;
		@include flex-column;

		li{
			width:100%;
			margin:6px 0;

			span{
				font-weight:600;
				margin-right:10px;
			}
		}
	}
}
.cal-tip-ctxMenu{
	
	ul {

		li {
			cursor:default;
			border-bottom:1px solid darken( $lightBaseColor, 5% );
			padding:10px 20px;

			&:hover{
				background-color: $greenColor;
				color: lighten( $lightBaseColor, 100% );
			}
		}
	}
}



